<template>
  <div>

      <searchForm v-on:search-form="getSearchForm"></SearchForm>

    <el-row class="el-row" :gutter="20">
      <el-col :span="2" >
        <el-button type="primary" @click="addInventory">进货</el-button>
      </el-col>
    </el-row>
    <el-row>
      <!-- 库存表格 -->
      <template>
        <el-table
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          height="400"
        >
        <el-table-column prop="itemId" sortable label="商品编号" width="120" ></el-table-column>
        <el-table-column prop="itemName" label="商品名称"></el-table-column>
        <el-table-column prop="amount" sortable label="库存"></el-table-column>
        <el-table-column prop="isSaled" label="状态">
          <template slot-scope="scope">
              <!--  | filterisStutas过滤器 -->
              <span
                :class="addClassStatus(scope.row.isSaled)"
              >{{scope.row.isSaled | filterIsSaled}}</span>
            </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
      <template slot-scope="scope">
        <el-button
          size="mini"
          :type="scope.row.isSaled==1?'danger':'success'"
          @click="downItem(scope.$index, scope.row)">{{scope.row.isSaled | filterChangeSaled}}</el-button>
      </template>
    </el-table-column>
      </el-table>
       <el-pagination
          style="margin-top: 10px;"
          background
          layout="sizes,prev, pager, next"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :page-sizes="[5, 10, 20, 40]"
          :current-page="pageNumber"
          :page-size="pageSize"
          :total="total"
        >
          <!-- pageNumber 和pageSize触发 -->
        </el-pagination>
      </template>

    </el-row>
  </div>
</template>
<script>
import SearchForm from "@/components/common/SearchForm";
import axios from "axios";

const baseUrl = "http://47.102.99.195:8888";
export default {
  data() {
    return {
      tableData:[],
      searchForm: {
        //查询表单数据
        className: "",
        itemNumbwe: "",
        brand: "",
        itemName: "",
        createTime: ""
      },
      total:0,
      pageNumber:1,
      pageSize:10,
    };
  },
  components: {
    SearchForm
  },
  created(){
    this.getTableData();
  },
  methods:{
    /**
     * 获取库存数据
     */
    getTableData:function(){
      axios.post(baseUrl+"/inventory/searchInventory",this.searchForm, {
          params: {
            pageNumber: this.pageNumber,
            pageSize: this.pageSize
          }
        })
        .then(res => {
          console.log("获取数据查询form===>>>");

          console.log(this.searchForm);
          this.tableData = res.data.obj;
          // 总页数
          this.total = res.data.maxCount;
          console.log("总数=====>>>");
          console.log(this.total);
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    /**
     * 添加样式
     */
    addClassStatus(i){
      switch(i){
        case 0:
          return "statusFaile";
        case 1:
          return "statusSuccess";
      }
    },
    /**
     * 进货
     */
    addInventory:function(){
      console.log('进货了');
      //进货按钮向父组件传递值
       this.$router.push("/home/addItem");

    },
    /**
     * 获取查询表单数据
     */
    getSearchForm: function(searchForm) {
      this.searchForm = searchForm;
      console.log(`父组件查询表单====》`);
      console.log(this.searchForm);
      //触发查询数据方法
      this.getTableData();
    },
    /**
     * 上下架商品
     */
    downItem(index,row){
      console.log('下架商品');
      var param = {
        itemId:"",
        isSaled:"0"
      }
      var msg= "";
      param.itemId = row.itemId;
      if(row.isSaled===0){
        msg = "商品上架";
        param.isSaled = "1";
      }
      if(row.isSaled===1){
        msg="商品下架";
        param.isSaled = "0";
      }
      //请求后台
      axios.post(baseUrl+"/item/changeSaled?",param).then(
        res=>{
          if(res.data.event==0){
             this.$message({
                type: "success",
                message: msg
              });
              this.getTableData();
          }else{
             this.$message({
                type: "error",
                message: res.data.msg
              });
          }
        }
      ).catch(
        (error)=>{
          this.$message({
                type: "error",
                message: error
              });
        }
      );
    },
    /**
     * 更改页码
     */
    handleCurrentChange(pageNumber) {
      this.pageNumber = pageNumber;
      this.getTableData();
    },
    /**
     * 更改页数
     */
    handleSizeChange: function(size) {
      this.pageSize = size;
      console.log(`页数====》${this.pagesize}`); //每页下拉显示数据
      this.getTableData();
    }
  },
  //本地过滤器
  filters:{
    /**
     * 售卖或者是下架的标识
     */
    filterIsSaled(value){
      if(value===0){
        return "已下架";
      }
      if(value===1){
        return "售卖中";
      }
    },
    /**
     * 改变上下架状态
     */
    filterChangeSaled(value){
       if(value===0){
        return "上架";
      }
      if(value===1){
        return "下架";
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.statusFaile {
  color: #f56c6c;
}
.statusSuccess {
  color: #67c23a;
}
</style>
